<template>
  <div>
    <div class="forLove animated fadeInUp">
      <canvas style="background:#f1f1f1;margin:0 auto;" ref="canvas"></canvas>
       <img class="title" src="../assets/img/forLove.png"/>
       <div class="text"><img src="../assets/img/down.png"/></div>
       <div class="btns">
      <div id="savepic" @click="oncanvasImgUrl"  class="btn">
        <img  src="../assets/img/send.png"/>
      </div>
      <div id="savepic" @click="clean"  class="btn">
        <img  src="../assets/img/clear.png"/>
      </div>
    </div>
    </div>
  </div>
</template>
<script>
import coding from '../assets/js/coding.js'
import canvas from '../assets/js/canvas.js'
export default {
  name: 'forLove',
  data () {
    return {
    }
  },
  mounted () {
    canvas.drawCanvas(this.$refs.canvas)
  },
  methods: {
    clean () {
      let board = this.$refs.canvas.getContext('2d')
      board.clearRect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height)
    },
    oncanvasImgUrl () {
      let canvas = this.$refs.canvas
      let canvasImgUrl = canvas.toDataURL()
      let base = new coding.Base64()
      let ncodeCanvasImgUrlEd = base.encode(canvasImgUrl)
      this.userId = sessionStorage.getItem('userId')
      let objData = {
        userId: this.userId,
        confessionImg: ncodeCanvasImgUrlEd
      }
      this.axios({
        method: 'post',
        url: 'http://211.149.169.49:8080/confession/user/confession.do',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        },
        data: objData,
        params: objData
      }).then(res => {
        sessionStorage.setItem('imgUrl', canvasImgUrl)
        sessionStorage.setItem('bbid', res.data.data)
        this.$router.push({name: 'success'})
      })
    }
  }
}
</script>
<style  @scoped lang="less">
    .forLove{
      .title{
       width: 4.32rem;
       height: 1.07rem;
       margin: 0 auto;
       margin-top: .45rem;
       margin-bottom: .56rem;
      }
      .text{
       width: 3.46rem;
       height: .58rem;
       margin: 0 auto;
       margin-top: .47rem;
       img{
        height: 100%;
        width: auto;
        margin: 0 auto;
       }
      }
    .btns{
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: .3rem;
      }
      .btn{
        width: 2.9rem;
        margin-right: .6rem;
      }
      .btn:last-child{
        margin-right: 0;
      }
      .add-margin-bottom{
        margin-bottom: 1rem;
      }

    }
    </style>
